<!-- 登录 -->
<template>
  <div class="login-container">
    <div class="login-overlay"></div>*
    
    <div class="login-box">
      <!-- 添加选项卡切换 -->
      <div class="login-tabs">
        <h2 :class="{ active: !isAdminLogin }" @click="isAdminLogin = false">用户登录</h2>
        <h2 :class="{ active: isAdminLogin }" @click="isAdminLogin = true">管理员登录</h2>
      </div>
      
      <!-- 根据登录类型显示不同提示 -->
      <div class="tip-box" v-if="!isAdminLogin">
        登录用户名：admin<br/>登录密码：admin
      </div>
      <div class="tip-box" v-else>
        管理员用户名：superadmin<br/>管理员密码：123456
      </div>
      
      <input v-model="username" placeholder="手机号/用户名" class="input-field">
      <input type="password" v-model="password" placeholder="登录密码" class="input-field">
      <button @click="handleLogin" class="login-btn">
                {{ isAdminLogin ? '管理员登录' : '立即登录' }}
                
      </button>

<!-- 登录 -->

<!-- <router-link to="/AdminLayout">管理员登录</router-link> -->
      <!-- 动态显示链接区域 -->
      <div class="link-group" v-if="isAdminLogin">
        <!-- <p class="forgot-pwd">管理员忘记密码？</p> -->
        <!-- <router-link to="/admin/register" class="register-link">管理员注册</router-link> -->
      </div>
      <div class="link-group" v-else>
        <p class="forgot-pwd">忘记密码？</p>
        <router-link to="/register" class="register-link">用户注册</router-link>
      </div>
      
      <div class="third-login" v-if="!isAdminLogin">
        <span>其他登录方式</span>
        <div class="icon-group">
          <img src="@/assets/wechat.png" alt="微信" class="social-icon">
          <img src="@/assets/weibo.png" alt="微博" class="social-icon">
          <img src="@/assets/qq.png" alt="QQ" class="social-icon">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/stores'
// 引入用户状态管理
import { useUserStore } from '@/stores/user'

// // 引入登录API
// import{login} from '@/store/api/login'
const userStore = useUserStore()
const router = useRouter()
const store = useStore()
const username = ref('admin')
const password = ref('admin')
const isAdminLogin = ref(false)
// async
const handleLogin =  async () => {
  try {
    await userStore.loginByUserName(username.value, password.value)
    // 登录成功后跳转
  } catch (error) {
    console.error('登录失败:', error)
  }
  if (username.value && password.value) {
    const loginType = isAdminLogin.value ? 'admin' : 'user'
    store.login(username.value, loginType)
    // router.push('/home')
    // 根据登录类型跳转不同页面
    
    if (isAdminLogin.value) {
      router.push('/adminLayout') // 假设你的管理员首页路由是 /admin，对应 AdminLayout.vue
    } else {
      router.push('/home') // 普通用户仍跳转到首页
    }
  } else {
    alert('请输入用户名和密码')
  }
}

</script>

<style scoped>
/* 保持原有样式不变 */
.login-container {
  position: relative;
  height: 100vh;
  background: url('@/assets/background.jpg') center/cover no-repeat;
}

.login-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  background: white;
}

.login-tabs {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.login-tabs h2 {
  cursor: pointer;
  font-size: 1.3rem;
  color: #999;
  transition: all 0.3s;
}

.login-tabs h2.active {
  color: #333;
  font-weight: bold;
  border-bottom: 2px solid #ff4d4f;
}

.tip-box {
  margin-bottom: 15px;
  color: red;
  font-size: 14px;
}

.input-field {
  width: 100%;
  padding: 12px 15px;
  margin: 15px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s;
}

.input-field:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 5px rgba(74,144,226,0.3);
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background: #cc3335;
}

.link-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  color: #666;
}

.forgot-pwd {
  margin-right: auto;
}

.register-link {
  color: #4a90e2;
  text-decoration: none;
}

.third-login {
  text-align: center;
  margin-top: 20px;
}

.icon-group {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.social-icon {
  width: 30px;
  height: 30px;
  margin: 0 10px;
}
</style>